.wraper {
    position: relative;
    background: #fff;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;

    &.dark {
        --subtitle-color: #3333331a;
        --title-color: #333;
    }

    &.light {
        --subtitle-color: #ffffff1a;
        --title-color: #fff;
    }
}

.messagebox {
    background: #fff;

    @apply  flex max-w-1180px w-full justify-content ;

    color: #333;
    box-shadow: 0 0 24px 0 #00000014;

    select,
    input,
    textarea{
        outline: none;
    }
}

.messagebtn{
    @apply flex items-center justify-center whitespace-nowrap;

    cursor: pointer;
    color: #fff;
    background: linear-gradient(90deg, #FE8207 0%, #F40 100%);
}

.mobile.wraper {
    .messagebox {
        @apply flex-col items-center pt-28px pb-32px px-4 mx-3 my-5;
    }

    .messagetop{
        @apply flex flex-col items-center justify-content gap-14px text-[#FE6507];
    }

    .messagetitle{
        @apply text-xl font-700 leading-5;
    }

    .messagedesc{
        @apply text-xs font-400 leading-3 text-[#636363];
    }

    .messageinfo{
        @apply flex flex-col w-full mt-7 gap-3;

         height: '40px';
         padding-left: '2px'
    }

    .mesinput{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        
        select,
        input{
            padding: 0 12px 0 40px;
            height: 40px;
            border-radius: 4px;
            width: 100%;
            border: 1px solid #eee;
            outline: none;
        }

        .arrow-iconfont{
            position: absolute;
            right: 12px;
            font-size: 20px;
            line-height: 20px;
            color: #EEE;
            transform: rotate(90deg)
        }

        select{
            appearance: none; /* 隐藏默认箭头 */
            appearance: none; /* 隐藏默认箭头 */
            appearance: none; /* 隐藏默认箭头 */
            padding-right: 20px; /* 确保有足够的空间放置自定义箭头 */
            color: #757575;
        }

        textarea{
            outline: none;
        }

        .ant-input{
            // border-color: #eee; 
        }

        .iconfont{
            @apply  absolute z-10 top-8px left-3 text-xl text-[#FE6507];
        }
    }

    .messelect{
        .iconfont{
            @apply  top-7px;
        }
    }

    .messagebtn{
        @apply w-full rounded-full py-4 mt-8 text-base leading-4;
    }

    .messagedata{
        @apply w-full mt-5 text-xs flex flex-row items-center justify-between;

        .mesdataleft{
            @apply flex flex-row items-center gap-5;

            .mesdatacourse{
                @apply max-w-106px whitespace-nowrap overflow-hidden truncate;
            }
        }
    }
}

.pc.wraper {
    .messagebox {
        @apply flex-col items-center pt-30px pb-34px px-10 my-10;
    }

    .messagetop{
        @apply w-full flex flex-row items-baseline justify-between gap-12px text-[#FE6507];
    }

    .messagetitle{
        @apply text-32px font-700 leading-10 whitespace-nowrap;
    }

    .messagedesc{
        @apply flex-1 text-sm font-400 leading-5 text-[#666] whitespace-nowrap;
    }

    .messageinfo{
        @apply flex flex-row gap-2.5 w-full mt-5;
    }

    .mesinput{
        position: relative;
        background: #F5F5F5 !important;
        flex: 1;
        
        input{ 
            @apply bg-[#F5F5F5] border-[#F5F5F5] shadow-none rounded;

            padding: 15px 12px 15px 38px;
            height: 50px;
        }
        
        .iconfont{
            @apply  absolute z-10 top-13px left-3 text-xl text-[#FE6507];
        }
        
        .ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-item, 
        .ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-placeholder{
          line-height: 48px !important;            
        }

    }

    .messagebtn{
        @apply py-11px px-70px text-xl leading-7 rounded;
    }

    .messagedata{
        @apply text-sm flex flex-row items-baseline justify-between text-[#333];

        .mesdataleft{
            @apply flex flex-row items-center gap-5;

            .mesdatacourse{
                @apply max-w-124px mr-10 whitespace-nowrap overflow-hidden truncate;
            }
        }
    }
}
